
import Header from '@/components/Header.vue';
import Sidebar from '@/components/Sidebar.vue';
import Footer from '@/components/Footer.vue';

import Home from '@/components/Home.vue';
import Introduction from '@/components/Introduction.vue';
import Basic from '@/components/Basic.vue';
import Advanced from '@/components/Advanced.vue';

import Animal from '@/components/Animal.vue';
import Lion from '@/components/Lion.vue';
import Tiger from '@/components/Tiger.vue';

// 定义路由规则( 即在一个数组中顶一个多个`路由记录` )
const routes = [
    // 使用 path 指定 路由 对应路径，使用 redirect 可以实现重定向
    { 
        path: '/' , 
        redirect: '/home'
    } ,
    // 每个路由都需要映射到一个组件，使用 component 指定组件
    { 
        path: '/home' , 
        components: {
            // 为不同的 命名视图 设置不同的组件
            'header': Header ,
            'sidebar': Sidebar,
            'default': Home ,
            'footer': Footer
        },
        // 路由元数据
        meta: {
            title: '主页'
        }
    } ,
    // 路由对象 也称作 路由记录
    { 
        path: '/introduction/:name' , 
        components: {
            // 为不同的 命名视图 设置不同的组件
            'header': Header ,
            'sidebar': Sidebar,
            'default': Introduction ,
            'footer': Footer
        },
        name: 'introduction',
        // 路由元数据
        meta: {
            title: '介绍'
        }
    } ,
    { 
        path: '/basic' , 
        components: {
            // 为不同的 命名视图 设置不同的组件
            'header': Header ,
            'sidebar': Sidebar,
            'default': Basic ,
            'footer': Footer
        },
        name: 'basic' ,
        // 路由元数据
        meta: {
            title: '基础'
        }
    } ,
    { 
        // 指定路径
        path: '/advanced' ,
        // 指定组件 
        components: {
            // 为不同的 命名视图 设置不同的组件
            'header': Header ,
            'sidebar': Sidebar,
            'default': Advanced ,
            'footer': Footer
        },
        // 指定路由名称
        name: 'advanced' ,
        // 指定别名和参数(其中的:id用于指定路由参数，id就是参数名称)
        alias: '/beginner/:id?',
        // 路由元数据
        meta: {
            title: '高级'
        },
        props: {
            // 请注意冒号之前的名称表示视图名称
            'header': false ,
            'default': true ,
            'footer': false
        }
    },
    {
        path: '/animal' ,
        name: 'animal' ,
        components: {
            'header': Header ,
            'sidebar': Sidebar,
            'default': Animal ,
            'footer': Footer
        },
        // 在 children 中定义自路由
        children: [
            {
                path: 'lion' ,
                component: Lion ,
                meta: {
                    title: '动物(狮子)'
                } 
            },
            {
                path: 'tiger' ,
                component: Tiger ,
                meta: {
                    title: '动物(老虎)'
                } 
            }
        ],
        meta: {
            title: '动物'
        },
        props: {
            default: route => {
                // 这里返回的对象中 name 对应 Animal 中 props: [ 'name' ]
                return { name: route.query.name }
            }
        }
    }
];

// 将路由规则导出
export default routes ; // ES6提供的模块化支持